<template>
  <el-row class="content flex-max">
    <el-row class="top-header p-10 flex-row">
      <el-row style="width: 200px">
        <el-button type="primary" @click="add" plain>
          <span class="iconfont iaiai-add f20 m-r-5"></span>添加
        </el-button>
      </el-row>
      <div class="flex-max search">
        <el-input v-model="search" style="width: 240px" placeholder="搜索姓名、手机号..." clearable class="m-r-10" />
        <el-button type="primary" v-if="!loading" @click="searchData" style="width: 90px" plain>
          <span class="iconfont iaiai-search f20 m-r-5"></span>搜索
        </el-button>
        <el-button type="primary" v-if="loading" :loading="loading" style="width: 90px">搜索</el-button>
      </div>
    </el-row>
    <el-row class="flex-max pr">
      <el-table :data="tableData" height="100%" class="pa-fill">
        <el-table-column label="头像" width="80">
          <template #default="scope">
            <el-image class="avatar center"
                      fit="cover"
                      :src="$getAvatar(scope.row.avatar)"
                      :preview-src-list="[$getAvatar(scope.row.avatar)]"
                      preview-teleported/>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号" width="110" />
        <el-table-column prop="name" label="姓名/手机号" width="120">
          <template #default="scope">
            <el-row>{{scope.row.name}}</el-row>
            <el-row>{{scope.row.phone}}</el-row>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="80">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.gender==0">未知</el-tag>
            <el-tag type="success" v-if="scope.row.gender==1">男</el-tag>
            <el-tag type="danger" v-if="scope.row.gender==2">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180">
          <template #default="scope">
            <el-row v-for="(dept,index) in scope.row.depts" :key="index">{{dept.name}}</el-row>
          </template>
        </el-table-column>
        <el-table-column label="岗位" width="180">
          <template #default="scope">
            <el-row v-for="(post,index) in scope.row.posts" :key="index">{{post.name}}</el-row>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column label="状态" width="60">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.disabled==0">正常</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.disabled==1">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template #default="scope">
            {{timestampToDateString(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template #default="scope">
            <el-row class="flex-row center-flex">
              <el-tooltip effect="dark" content="编辑信息" placement="bottom">
                <el-button link type="primary" @click.stop="edit(scope.row.id)">
                  <span class="iconfont iaiai-edit"></span>
                </el-button>
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-tooltip effect="dark" content="重新设置密码" placement="bottom">
                <el-button link type="primary" @click.stop="editPwd(scope.row.id)">
                  <span class="iconfont iaiai-pencil-lock" />
                </el-button>
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-popconfirm title="是否要删除此用户?" :hide-icon="true" @confirm="del(scope.row.id)">
                <template #reference>
                  <el-row>
                    <el-tooltip effect="dark" content="删除" placement="bottom">
                      <el-button link type="danger">
                        <span class="iconfont iaiai-delete" />
                      </el-button>
                    </el-tooltip>
                  </el-row>
                </template>
              </el-popconfirm>
            </el-row>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="无数据" />
        </template>
      </el-table>
    </el-row>

    <div class="content-page center-vertical p-lr-10">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :total="total"
          layout="sizes, prev, pager, next, total"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="tableSelect"
          @current-change="chagePage"/>
    </div>

    <addUser ref="addUserComp" @onsuccess="addUserSuccess"/>
    <editUser ref="editUserComp" @onsuccess="editUserSuccess"/>
    <editPassword ref="editPasswordComp"/>
  </el-row>
</template>

<script lang="ts" setup>
import {onMounted, ref, inject} from "vue"
import {timestampToDateString} from "@/core/util/date_util"
import addUser from './add.vue'
import editUser from './edit.vue'
import editPassword from './edit_password.vue'

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const page = ref(0)
const limit = ref(20)
const total = ref(0)
const tableData = ref([])
const search = ref("")
const loading = ref(true)

const addUserComp = ref(null)
const editUserComp = ref(null)
const editPasswordComp = ref(null)

onMounted(()=>{
  getData()
})

function getData(){
  $post($api.userList,{
    "page": page.value + 1,
    "limit": limit.value,
    "search": search.value,
  }).then((res:any)=>{
    tableData.value = res.data.result.records
    total.value = res.data.result.total
    page.value = res.data.result.current
    loading.value = false
  }).catch((err:any)=>{
    loading.value = false
  })
}

function searchData(){
  page.value = 0
  loading.value = true
  getData()
}

function tableSelect(n:number){
  limit.value = n
  searchData()
}

function chagePage(n: number){
  page.value = n - 1
  getData()
}

function add(){
  addUserComp.value.showComp()
}

function addUserSuccess(){
  page.value = 0
  getData()
}

function edit(id:string){
  editUserComp.value.showComp(id)
}

function editUserSuccess(){
  page.value = 0
  getData()
}

function editPwd(id:string){
  editPasswordComp.value.showComp(id)
}

function del(id:string){
  $post($api.userDel,{"id": id}).then((res:any)=>{
    $toast.success('删除成功')

    page.value = page.value - 1
    getData()
  })
}

</script>

<style lang="scss" scoped>
.content{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .avatar{
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .top-header{
    background-color: white;
    border-bottom: 1px #efefef solid;

    .search{
      float: right;
      text-align: right;
      justify-content: flex-end;
    }
  }

  .content-page{
    height: 50px;
    background-color: white;
  }
}
</style>
